<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>JpGraph Manual (ver:30 Oct 2002 09:48)</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<STYLE TYPE="text/css"><!--
BODY { font-family: serif }
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
H4 { font-family: sans-serif }
H5 { font-family: sans-serif }
H6 { font-family: sans-serif }
SUB { font-size: smaller }
SUP { font-size: smaller }
PRE { font-family: monospace }
A { text-decoration: none }
--></STYLE>
</HEAD>
<BODY>
<IMG  src="img/JpGraph_Logo.png">
<A HREF="index.html">Contents</A>
<A HREF="4020pieplot.html">Previous</A>
<A HREF="5gantt.html">Next</A>
<HR>
<H1><A NAME="8">8 Using image maps with JpGraph</A></H1>
 Image maps, or client side image which are used in JpGraph, gives you
 the opportunity to create hot-spots in the graphs which allows you to
 build a set of &quot;drill-down&quot; graphs.
<P> In the following I will make the assumption that the reader is
 familiar with the basic concepts of client side image map in HTML. If
 you are not familiar you can a) read some book that explains this or b)
 pay me lots of money to explain it to you :-)</P>
<H2><A NAME="8_1">8.1 The basic structure of an image map script</A></H2>
 The standard structure for a HTML page using client side image maps
 would be something along the lines of
<P></P>
<PRE>
// Image map specification with name &quot;mapname&quot;
&lt;MAP NAME=...&gt;
... specification ...
&lt;/MAP&gt;

// Image tag
&lt;img src=&quot;...&quot; ISMAP USEMAP=&quot;mapname&quot;&gt;
</PRE>
<P> This poses some interesting questions.</P>
<P> Since we normally call the graphing script directly in the &lt;img&gt; tag
 how do we get hold of the image map (which is available only in the
 image script&gt; in this &quot;wrapper&quot; script?</P>
<P> In JpGraph there is actually two ways of solving this.</P>
<OL>
<LI> Use the preferred &quot;builtin&quot; way using the modified Stroke() method
 Graph::StrokeCSIM() instead of the standard Graph::Stroke() method.</LI>
<LI> Directly use the Graph::GetHTMLImageMap() which gives you fine
 control at the expense of more complex coding.</LI>
</OL>
 The first (and preferred) way modifies the stroke method so that
 instead of returning an image (like the standard Stroke() method)
 StrokeCSIM() actuallty returns a HTML page containing both the image
 map specifiaction and the correct &lt;IMG&gt; tag.
<P> This of course means that you have to treat an image map returning
 image script diffrently from a non-CSIM image script, for example you
 can't use it directly as the target for the &quot;src&quot; attribute of the
 &lt;IMG&gt; tag.</P>
<H2><A NAME="8_2">8.2 Specifying targets for image map plots</A></H2>
 To turn a standard image script into a CSIM script the first thing you
 need to do is to supply the appropriate URL targets for the hotspots in
 the image.
<P> What the hotspots represent depends on the type of plot you are
 doing. The following plot types support image maps.</P>
<UL>
<LI> Line plots. Markers are hotspots.</LI>
<LI> Scatter plot. Markers are hotspots.</LI>
<LI> Pie Plots and 3D Pie plots. Each slice is a hotspot</LI>
<LI> All types of Bar graphs. Each bar is a hotspot</LI>
</UL>
 To specify a link for each hotspot you have to use the<A href="../ref/Plot.html#_PLOT_SETCSIMTARGETS">
 SetCSIMTargets()</A> method for each plot in the graph you want to have
 hotspots.
<P> The two arguments to this method are</P>
<UL>
<LI> $aTargets, an array of valid URL targts. One URL per hotspot, for
 example if you have a 10 values bar plot you need 10 URLs</LI>
<LI> $aAlts, an array of valid alt-texts. Usually showed by most
 browsers if you hold you pointer over a hotspot.</LI>
</UL>
<H2><A NAME="8_3">8.3 Using StrokeCSIM()</A></H2>
 The simplest way of creating a creating a CSIM image is with the
 StrokeCSIM() method. As mentioned before this method actually returns a
 (small) HTML page containing both the image-tag as well as the image
 map specification. Hence you can't use the script directly in an
 image-tags src-property.
<P> You can create an CSIM in two ways</P>
<OL>
<LI> Use the CSIM image script as the target in a standard anchor
 reference, for example <CODE></CODE></LI>
<PRE>
&lt;a href=&quot;mycsimscript.html&quot;&gt;
</PRE>
 This has the drawback that your image page will only contain the image
 and nothing else.
<LI> The other way let's you include the image in an arbitrary HTML page
 by just including the image script at the wanted place in your HTML
 page using a standard &quot;include&quot; php statement. For example <CODE></CODE>
</LI>
<PRE>
&lt;h2&gt; This is an CSIM image &lt;/h2&gt;

&lt;?php
include &quot;mycsimscript.php&quot;
?&gt;
</PRE>
</OL>
<HR> <SMALL><STRONG> Note:</STRONG> If you have several CSIM images on
 the same page you must use 'include_once' in the scripts when you
 include &quot;jpgraph.php&quot; and the other jpgraph library files since you
 will otherwise in effect try to include these libraries multiple times
 on the same page and get a &quot;Already defined error&quot;</SMALL>
<HR> The process to replace Stroke() with StrokeCSIM() is simple. You
 just need to make the replacement and supply some arguments to
 StrokeCSIM(). The only required argument is the first which must be the
 name of the actual image script file including the extension. So for
 example if your image script is called &quot;mycsimscript.php&quot; you must make
 the call
<BR> &nbsp;
<BR> &nbsp;
<BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
<B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
-&gt;</FONT><FONT color="#0000CC">StrokeCSIM</FONT><FONT color="#006600">(</FONT><FONT
color="#CC0000">'mycsimscript.php'</FONT><FONT color="#006600">)</FONT><FONT
color="#0000CC"></FONT></FONT></CODE></B></DIV>
<P>
<BR></P>
<HR><SMALL><STRONG> Sidebar:</STRONG> Why do I need to supply the image
 script name? The reason is that in the creation of the HTML page which
 is sent back we need to refer to the script in the image tag. So why
 not use the PHP_SELF reference? The problem with PHP_SELF is that in
 the case where we include the image-script in an HTML page and use the
 PHP_SELF we will get the name of the HTML page and not the actual
 script in which the PHP_SELF is used.</SMALL>
<HR> The other arguments to StrokeCSIM() are optional. Please note that
 if you are using several CSIM images in the same HTML page you also
 need to specify the image map name as the second parameter since all
 image maps must be unique since they are used to bind one image to one
 image map. Please see the class reference<A href="../ref/Graph.html#_GRAPH_STROKECSIM">
 StrokeCSIM()</A> for details.
<H2><A NAME="8_4">8.4 Examples of Image maps</A></H2>
 The examples below shows how different plot types uses image maps.
 Please note that none of the URLs in the image points to any valid
 page. SO you will get an &quot;404 Page not found&quot; if you click on the
 images. A nice feature in most browsers is that if you hold the pointer
 on a CSIM point in the image you will see the alt-tag as a small popup.
 In these examples that popup is used to display the value for the
 particular part of the graph.
<H3><A NAME="8_4_1">8.4.1 Client maps with Bar graphs</A></H3>
<TABLE>
<TR><TD valign="bottom"></MAP> <IMG border="0" HEIGHT="250" ISMAP  src="img/bar_csimex1.png"
USEMAP="#bar_csimex1" WIDTH="310"></TD><TD valign="bottom"></MAP> <IMG border="0"
HEIGHT="200" ISMAP  src="img/bar_csimex2.png" USEMAP="#bar_csimex2" WIDTH="310">
</TD></TR>
</TABLE>
<H3><A NAME="8_4_2">8.4.2 Client maps with Pie graphs</A></H3>
<TABLE>
<TR><TD valign="bottom"></MAP> <IMG border="0" HEIGHT="200" ISMAP  src="img/pie_csimex1.png"
USEMAP="#pie_csimex1" WIDTH="300"></TD><TD valign="bottom"></MAP> <IMG border="0"
HEIGHT="200" ISMAP  src="img/pie3d_csimex1.png" USEMAP="#pie3d_csimex1" WIDTH="400">
</TD></TR>
</TABLE>
<H3><A NAME="8_4_3">8.4.3 Client maps with Scatter graphs</A></H3>
<TABLE>
<TR><TD valign="bottom"></MAP> <IMG border="0" HEIGHT="200" ISMAP  src="img/scatter_csimex1.png"
USEMAP="#scatter_csimex1" WIDTH="300"></TD></TR>
</TABLE>
<H2><A NAME="8_5">8.5 How does StrokeCSIM() work?</A></H2>
 Knowledge of the exact technical details of the way StrokeCSIM() works
 is probably not needed by many people but for completeness we outline
 those details in this short section.
<P> The fundamental issue we have to solve is that we must be able to
 call the image script in two modes. When the user includes the image
 script the StrokeCSIM() method should return the HTML page but when the
 image script is later called directly in the image tag it must not
 return an HTML page but rather the actual image.</P>
<P> The way this is solved is by using one HTTP argument which is passed
 on automatically when we use the image script name in the image-tag.</P>
<P> If you look at the generated HTML you will see that the argument to
 the src-property of the image tag is not simply the script name but the
 script name with a additional argument.</P>
<P> In the JpGraph internal code this pre-defined argument is checked
 for and if it exists the image is send back and not the HTML page.</P>
<P> The name of this argument is defined by a DEFINE() statement in
 JpGraph. The define is _CSIM_DISPLAY.</P>
<H2><A NAME="8_6">8.6 Getting hold of the image map</A></H2>
 In the case where you want to store the image on disk and later use it
 in an img-tag you need to get hold of the image map. For this you will
 have to use the function<A href="../ref/Graph.html#_GRAPH_GETHTMLIMAGEMAP">
 Graph::GetHTMLImageMap()</A>
<P> An example of the use of this is shown below. With these lines the
 image will be written to a file. The script then returns a HTML page
 which contains the Client side image map and an img-tag which will
 retrieve the previously stored file.
<BR> &nbsp;
<BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
<B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
-&gt;</FONT><FONT color="#0000CC">Stroke</FONT><FONT color="#006600">(</FONT><FONT
color="#CC0000">&quot;/usr/local/httpd/htdocs/img/image001.png&quot;</FONT><FONT color="#006600">
);
<BR />echo&nbsp;</FONT><FONT color="#0000CC">$graph</FONT><FONT color="#006600">
-&gt;</FONT><FONT color="#0000CC">GetHTMLImageMap</FONT><FONT color="#006600">
(</FONT><FONT color="#CC0000">&quot;myimagemap001&quot;</FONT><FONT color="#006600">
);
<BR />echo&nbsp;</FONT><FONT color="#CC0000">&quot;&lt;img src=\&quot;img/image001.png\&quot;
 ISMAP USEMAP=\&quot;#myimagemap001\&quot; border=0&gt;&quot;</FONT><FONT color="#006600">
;</FONT><FONT color="#0000CC"></FONT></FONT></CODE></B></DIV></P>
<P></P>
<P></P>
<H2><A NAME="8_7">8.7 Image maps and the cache system</A></H2>
 For version 1.9 the cache system has been extended to include even the
 CSIM maps. For each CSIM graph two files are stored in the cache, the
 image file itself as well as the wrapper HTML with the actual image
 map. For further information see the chapter on &quot;Understanding hte
 Cache system&quot;<HR>
<IMG  src="img/JpGraph_Logo.png">
<A HREF="index.html">Contents</A>
<A HREF="4020pieplot.html">Previous</A>
<A HREF="5gantt.html">Next</A>
</BODY>
</HTML>
